<!DOCTYPE html>
<html>
	<head>
		<title>文件上传</title>
		<script type="text/javascript" src="js/login.js"></script>
		<meta charset="utf-8">
		<script src="js/ip.js"></script>
		<link rel="stylesheet" type="text/css" href="css/defaultContainer.css">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			var globalResult;
			loadFill();

			function loadFill() {
				$.ajax({
					"url": defaultIp + "/listJobSortAll",
					"type": "get",
					"success": function(e) {
						console.log(e);
						globalResult = e;
						var html = "";
						for (var i = 0; i < e.length; i++) {
							html += "<option value=\"" + i + "\" selected=\"true\">" + e.res[i].jobClassify + "</option>";
							// $("#jobSelect").html("<option value=\"本科\" selected=\"true\">本科</option>");
						}
						$("#jobSelect").html(html);

						flushAll(i - 1);
					}
				});
			}

			function flushAll(index) {
				// body...
				$("#filePath").attr('value', globalResult.res[index].hdfsPath);
				$("#id").attr('value', globalResult.res[index].id);

				$("#count_img").attr('src', defaultIp + "/images" + globalResult.res[index].hdfsPath + "_count.png");
				$("#salary_img").attr('src', defaultIp + "/images" + globalResult.res[index].hdfsPath + "_salary.png");

				$("#big_count_img").attr('href', defaultIp + "/images" + globalResult.res[index].hdfsPath + "_count.png");
				$("#big_salary_img").attr('href', defaultIp + "/images" + globalResult.res[index].hdfsPath + "_salary.png");
				// big_count_img
			}

			function reloadData() {
				$("#reloadimg").attr("src", "images/load.gif");
				$.ajax({
					"url": defaultIp + "/predictPrepared",
					"type": "get",
					"success": function(result) {
						$("#reloadimg").attr("src", "images/load.png");

						alert("重新预测完成");
						location.reload();
					}
				});

			}

			function uploadFile() {
				$("#showInfo").text("");
				if ($("#chooseFile").text() == "选择文件") {
					alert("请选择合适的文件上传");
					return;
				}

				if ($("#filePath").val() == "") {
					alert("请填写HDFS路径");
					return;
				}

				if ($("#id").val() == "") {
					alert("请填写职位分类id");
					return;
				}

				var files = document.getElementById("fileSelected").files;
				var path = document.getElementById("fileSelected").value;
				//var fileName=document.getElementById("fileName").value;
				var filePath = document.getElementById("filePath").value;
				var fileId = document.getElementById("id").value;
				document.getElementById("showInfo").hidden = false;
				console.log(files);
				console.log(path);
				console.log(filePath);
				console.log(fileId);
				//console.log(fileName);
				// $("#upload").css({'background-color' : 'gray'});
				$("#upload").attr("disabled", true);
				$("#upload").val("正在上传..");

				for (var i = 0; i < files.length; ++i) {
					var formData = new FormData();
					//formData.append("fileName",fileName);
					formData.append("file", files[i]);
					formData.append("path", filePath);
					formData.append("id", fileId);
					var iCount = setInterval(getLoc, 1500);
					document.getElementById("showInfo").append("上传进度： ");
					$.ajax({
						"url": defaultIp + "/file/upload",
						"type": "post",
						"data": formData,
						"dataType": "text",
						"contentType": false,
						"processData": false,
						"success": function(result) {
							$("#showInfo").text("");
							console.log(result);
							document.getElementById("showInfo").append(result + "\n");
							clearInterval(iCount);
							$("#upload").attr("disabled", false);
							$("#upload").val("上传文件");

							//alert(result);
						},
						"error": function(result) {
							$("#upload").attr("disabled", false);
							$("#upload").val("上传文件");
							clearInterval(iCount);
							console.log(result);
						}
					});
				}


			}

			function getLoc(argument) {
				document.getElementById("showInfo").append("=");
			}


			function onprogress(evt) {
				var loaded = evt.loaded;
				var tot = evt.total;
				var percent = Math.floor(100 * loaded / tot);

				$("#progressBar").value = percent;
			}

			function chooseFileFun(e) {
				console.log(e);
				var fileName = e.files[0].name;
				$("#chooseFile").text(fileName);
			}
		</script>
		<style type="text/css" media="screen">
			#form_panel {
				display: inline-block;
				width: 50%;
				height: 100%;
				margin-top: 20px;
			}

			.fileinput-button {
				position: absolute;
				display: inline-block;
			}

			.fileinput-button input {
				position: absolute;
			}

			#page_title {
				margin-top: 2%;
				margin-bottom: 3%;
				height: 10%;
				width: 80%;
			}

			#page_title p {
				font-size: 40px;
			}

			#content {
				width: 100%;
			}

			#upload:hover {
				color: #444;
				background: #eee;
				border-color: #ccc;
				text-decoration: none
			}

			.a-upload {
				padding: 4px 12px;
				height: 45px;
				line-height: 35px;
				position: relative;
				cursor: pointer;
				color: black;
				background: #ddd;
				border: 1px solid #ddd;
				border-radius: 5px;
				overflow: hidden;
				display: inline-block;
				*display: inline;
				*zoom: 1;
				text-align: center;
			}

			.preimg {
				width: 400px;
				height: 250px;
			}

			.a-upload input {
				position: absolute;
				font-size: 40px;
				right: 0;
				top: 0;
				opacity: 0;
				filter: alpha(opacity=0);
				cursor: pointer;
				text-align: center;
			}

			.a-upload:hover {
				color: #444;
				background: #eee;
				border-color: #ccc;
				text-decoration: none
			}
		</style>

	</head>
	<body>
		<div id="container" align="left">
			<div id="page_title">
				<div id="page_title_text" class="text ">
					<p><span></span>
						<span>职位信息预测</span>
						<span><img id="reloadimg" style="width: 16px;height: 16px;" src="images/load.png" onclick="reloadData()" /></span>
						<span style="font-size: 13px;"><--点击重新预测</span>
					</p>
				</div>
			</div>
			<div id="content" align="center">
				<div align="left">
					<!-- <form action="" method="post" enctype="multipart/form-data"> -->
					<select style="width: 250px;" class="form-control" id="jobSelect" onchange="flushAll(this.value);">
					</select>
					<br>

					<!-- 图片div -->
					<div style="margin-top: 15px;border:1px solid red; height: 350px;width: 900px;display: inline-flex;">
						<div style="border-right:1px solid black; height: 250px;width: 450px;">
							<img src="http://localhost:8081/images/alo_count.png" class="preimg" id="count_img" />
							<p style="text-align: center;">职位分析</p>
							<p style="text-align: center;"><a target="_blank" id="big_count_img" href="http://localhost:8081/images/alo_count.png">点击查看大图</a></p>
						</div>
						<div style="border-left:1px solid black; height: 250px;width: 450px;">
							<img src="http://localhost:8081/images/alo_salary.png" class="preimg" id="salary_img" />
							<p style="text-align: center;">薪资分析</p>
							<p style="text-align: center;"><a target="_blank" id="big_salary_img" href="http://localhost:8081/images/alo_salary.png">点击查看大图</a></p>
						</div>
					</div>



					<!-- <br>
						<input type="text" disabled="true" class="form-control" id="filePath" name="path" placeholder="HDFS路径"></input>
						<br>

						<br>
						<input type="text" disabled="true" class="form-control" id="id" name="id" placeholder="请输入职位分类id"></input>
						<br> -->
					<!-- <br>
						<input type="button" class="btn btn-default" id="upload" onclick="uploadFile()" value="上传文件" />
						<br> -->
					<br>
					<!--
			    <progress value="0" max="100" id="progressBar"></progress>
			-->
					<textarea name="showInfo" id="showInfo" hidden="true" style="width: 400px;height: 400px;">f				
			</textarea>
					<!-- </form> -->
				</div>
			</div>
		</div>
	</body>
</html>
